<script setup>
import { ref, computed, onMounted, onBeforeMount } from 'vue';
import { ElDialog, ElAlert } from 'element-plus';

// 公告弹窗控制
const showAnnouncement = ref(true);
const announcementTitle = '系统公告';
const announcementContent = '欢迎使用我们的服务，请仔细阅读使用说明...';

// 阶段提示信息
const stepTips = [
  '请选择您需要的服务',
  '请选择具体的功能', 
  '请输入账号信息并选择课程',
  '请阅读并同意协议',
  '请确认订单并完成支付'
];
const currentTip = computed(() => stepTips[currentStep.value]);
import axios from 'axios';
import { 
  ElCard,
  ElRadioGroup,
  ElRadio,
  ElRadioButton,
  ElDivider,
  ElRow,
  ElCol,
  ElTag,
  ElButton,
  ElEmpty,
  ElSkeleton,
  ElContainer,
  ElHeader,
  ElMain,
  ElSteps,
  ElStep,
  ElForm,
  ElFormItem,
  ElInput,
  ElCheckboxGroup,
  ElCheckbox,
  ElResult
} from 'element-plus';

// 状态变量
const categories = ref([]); // 服务
const subCategories = ref([]); // 功能
const selectedCategory = ref(null); // 选中的服务
const selectedSubCategory = ref(null); // 选中的功能
const loading = ref(false); // 加载状态
const subCategoryLoading = ref(false); // 功能加载状态
const currentStep = ref(0); // 当前步骤
const courses = ref([]); // 课程列表
const coursesLoading = ref(false); // 课程加载状态
const selectedCourses = ref([]); // 选中的课程
const formData = ref({
  school: '',
  user: '',
  pass: ''
});
const paymentMethod = ref('alipay'); // 支付方式：alipay 或 wechat
const windowWidth = ref(window.innerWidth);
const agreedToTerms = ref(false); // 是否同意协议

// 检测是否为移动设备
const isMobile = computed(() => {
  return windowWidth.value <= 768;
});

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

// 在组件挂载前添加窗口大小变化监听
onBeforeMount(() => {
  window.addEventListener('resize', handleResize);
});

// 在组件卸载前移除窗口大小变化监听
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

// 计算总价
const totalPrice = computed(() => {
  if (!selectedSubCategory.value) return 0;
  const price = parseFloat(selectedSubCategory.value.price) || 0;
  return price * (selectedCourses.value.length || 1);
});

// 获取服务数据
const fetchCategories = async () => {
  loading.value = true;
  try {
    const response = await axios.get('https://x96fdwg5ly.bja.sealos.run/get_list');
    if (response.data && response.data.ok && response.data.list) {
      categories.value = response.data.list;
    } else {
      console.error('获取服务数据格式错误:', response.data);
    }
  } catch (error) {
    console.error('获取服务失败:', error);
  } finally {
    loading.value = false;
  }
};

// 获取功能数据
const fetchSubCategories = async (cid) => {
  if (!cid) return;
  
  subCategoryLoading.value = true;
  subCategories.value = []; // 清空之前的数据
  selectedSubCategory.value = null; // 清空选中的功能
  
  try {
    const response = await axios.post('https://x96fdwg5ly.bja.sealos.run/get_list_cid', { cid });
    
    // 处理嵌套在originalResponse中的数据
    if (response.data && response.data.originalResponse) {
      const originalResponse = response.data.originalResponse;
      if (originalResponse.code === 1 && originalResponse.data) {
        subCategories.value = originalResponse.data;
      } else {
        console.error('获取功能数据格式错误:', originalResponse);
      }
    } else if (response.data && response.data.code === 1 && response.data.data) {
      // 兼容直接返回数据的情况
      subCategories.value = response.data.data;
    } else {
      console.error('获取功能数据格式错误:', response.data);
    }
  } catch (error) {
    console.error('获取功能失败:', error);
  } finally {
    subCategoryLoading.value = false;
  }
};

// 错误信息
const errorMessage = ref('');
const showError = ref(false);

// 获取课程数据
const fetchCourses = async () => {
  if (!selectedSubCategory.value || !formData.value.school || !formData.value.user || !formData.value.pass) {
    errorMessage.value = '请填写完整的账号信息并选择功能';
    showError.value = true;
    return;
  }
  
  coursesLoading.value = true;
  courses.value = []; // 清空之前的数据
  selectedCourses.value = []; // 清空选中的课程
  errorMessage.value = '';
  showError.value = false;
  
  try {
    // 增加超时时间到30秒
    const response = await axios.post('https://x96fdwg5ly.bja.sealos.run/get_ke', {
      platform: selectedSubCategory.value.kid, // 使用kid字段作为platform
      school: formData.value.school,
      user: formData.value.user,
      pass: formData.value.pass
    }, {
      timeout: 30000 // 增加超时时间到30秒
    });
    
    if (response.data && response.data.originalResponse) {
      const originalResponse = response.data.originalResponse;
      if (originalResponse.code === 1 && originalResponse.data) {
        courses.value = originalResponse.data;
      } else {
        errorMessage.value = `获取课程失败: ${originalResponse.msg || '未知错误'}`;
        showError.value = true;
        console.error('获取课程数据格式错误:', originalResponse);
      }
    } else if (response.data && response.data.code === 1 && response.data.data) {
      courses.value = response.data.data;
    } else if (response.data && Array.isArray(response.data)) {
      courses.value = response.data;
    } else {
      errorMessage.value = '获取课程失败: 返回数据格式不正确';
      showError.value = true;
      console.error('获取课程数据格式错误:', response.data);
    }
    
    // 如果没有获取到课程数据
    if (courses.value.length === 0 && !errorMessage.value) {
      errorMessage.value = '未找到任何课程，请检查账号信息是否正确';
      showError.value = true;
    }
  } catch (error) {
    if (error.code === 'ECONNABORTED') {
      errorMessage.value = '获取课程超时，请稍后再试';
    } else if (error.response) {
      errorMessage.value = `获取课程失败: ${error.response.data?.msg || error.message}`;
    } else {
      errorMessage.value = `获取课程失败: ${error.message || '未知错误'}`;
    }
    showError.value = true;
    console.error('获取课程失败:', error);
  } finally {
    coursesLoading.value = false;
  }
};

// 模拟课程数据（当API不可用时使用）
const useMockData = () => {
  courses.value = [
    { id: '1', name: '高等数学', teacher: '张教授' },
    { id: '2', name: '大学英语', teacher: '李教授' },
    { id: '3', name: '计算机基础', teacher: '王教授' },
    { id: '4', name: '数据结构', teacher: '刘教授' },
    { id: '5', name: '操作系统', teacher: '陈教授' }
  ];
  errorMessage.value = '使用模拟数据（API不可用）';
  showError.value = true;
};

// 当选择服务时
const handleCategoryChange = (value) => {
  selectedCategory.value = value;
  const category = categories.value.find(cat => cat._id === value);
  if (category) {
    fetchSubCategories(category.cid);
  }
};

// 当选择功能时
const handleSubCategoryChange = (item) => {
  selectedSubCategory.value = item;
};

// 下一步
const nextStep = () => {
  // 清除错误信息
  errorMessage.value = '';
  showError.value = false;
  
  // 验证当前步骤
  if (currentStep.value === 0) {
    if (!selectedCategory.value) {
      errorMessage.value = '请选择一个服务';
      showError.value = true;
      return;
    }
    currentStep.value = 1;
    return;
  } 
  
  if (currentStep.value === 1) {
    if (!selectedSubCategory.value) {
      errorMessage.value = '请选择一个功能';
      showError.value = true;
      return;
    }
    currentStep.value = 2;
    return;
  }
  
  if (currentStep.value === 2) {
    if (!formData.value.school || !formData.value.user || !formData.value.pass) {
      errorMessage.value = '请填写完整的账号信息';
      showError.value = true;
      return;
    }
    
    if (selectedCourses.value.length === 0 && courses.value.length > 0) {
      errorMessage.value = '请至少选择一个课程';
      showError.value = true;
      return;
    }
    
    if (courses.value.length === 0) {
      fetchCourses();
      return;
    }
    
    currentStep.value = 3;
    return;
  }

  if (currentStep.value === 3) {
    console.log('协议确认步骤，agreedToTerms:', agreedToTerms.value);
    if (!agreedToTerms.value) {
      errorMessage.value = '请先阅读并同意协议';
      showError.value = true;
      return;
    }
    console.log('同意协议，准备跳转到付款步骤');
    currentStep.value = 4;
    return;
  }
};

// 上一步
const prevStep = () => {
  // 清除错误信息
  errorMessage.value = '';
  showError.value = false;
  
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 提交订单
const submitOrder = () => {
  // 这里可以添加提交订单的逻辑
  alert('订单提交成功！');
};

// 页面加载时获取服务数据
onMounted(async () => {
  await fetchCategories();
  
  // 默认选择第一个服务
  if (categories.value.length > 0) {
    selectedCategory.value = categories.value[0]._id;
    const category = categories.value[0];
    if (category) {
      await fetchSubCategories(category.cid);
      
      // 如果有功能，默认选择第一个
      if (subCategories.value.length > 0) {
        selectedSubCategory.value = subCategories.value[0];
      }
    }
  }
});
</script>

<template>
  <el-container class="service-page">
    <!-- 公告弹窗 -->
    <el-dialog
      v-model="showAnnouncement"
      :title="announcementTitle"
      :width="isMobile ? '90%' : '600px'"
      custom-class="announcement-dialog"
    >
      <div style="padding: 20px; line-height: 1.6;">
        {{ announcementContent }}
      </div>
    </el-dialog>

    <el-main class="service-main">
      <h2 class="service-title">服务流程</h2>
              <div class="service-flow">
                <div class="steps-wrapper">
                  <el-steps 
                    :active="currentStep" 
                    finish-status="success"
                    align-center
                    class="service-steps"
                    :class="{'is-mobile': isMobile}"
                  >
                    <el-step 
                      title="选择服务" 
                      icon="el-icon-shopping-bag-1"
                      :description="isMobile ? '' : '选择您需要的服务'"
                    />
                    <el-step 
                      title="选择功能" 
                      icon="el-icon-s-operation"
                      :description="isMobile ? '' : '选择具体的功能'"
                    />
                    <el-step 
                      title="填写信息" 
                      icon="el-icon-edit"
                      :description="isMobile ? '' : '输入账号信息并选择课程'"
                    />
                    <el-step 
                      title="确认支付" 
                      icon="el-icon-wallet"
                      :description="isMobile ? '' : '确认订单并付款'"
                    />
                  </el-steps>
                </div>
              </div>
        <!-- <div style="color: red; margin: 10px 0;">
          当前步骤: {{ currentStep + 1 }} | 
          服务选中: {{ selectedCategory ? '是' : '否' }} | 
          功能选中: {{ selectedSubCategory ? '是' : '否' }}
        </div> -->
        
        <div class="step-content">
          <!-- 第一步：选择服务 -->
          <div v-if="currentStep === 0">
            <el-alert type="info" :title="currentTip" style="margin-bottom: 16px;" />
            <el-skeleton :loading="loading">
              <div v-if="categories.length > 0" class="category-section">
                <h2>请选择服务</h2>
                <el-radio-group 
                  v-model="selectedCategory" 
                  @change="handleCategoryChange"
                  class="category-radio-group"
                >
                  <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    <el-radio-button 
                      v-for="category in categories" 
                      :key="category._id" 
                      :label="category._id"
                      :size="isMobile ? 'small' : 'medium'"
                    >
                      {{ category.name }}
                    </el-radio-button>
                  </div>
                </el-radio-group>
                <el-alert v-if="showError" type="error" :title="errorMessage" class="error-alert" />
              </div>
              <el-empty v-else description="暂无分类数据" />
            </el-skeleton>
          </div>
          
          <!-- 第二步：选择功能 -->
          <div v-else-if="currentStep === 1">
            <el-alert type="info" :title="currentTip" style="margin-bottom: 16px;" />
            <el-skeleton :loading="subCategoryLoading">
              <div v-if="subCategories.length > 0" class="sub-category-section">
                <h2>请选择功能</h2>
                <div class="function-grid">
                  <el-card
                    v-for="item in subCategories"
                    :key="item.id"
                    shadow="hover"
                    :class="{ 'selected-function': selectedSubCategory && selectedSubCategory.id === item.id }"
                    @click="handleSubCategoryChange(item)"
                    class="function-card"
                  >
                    <div class="function-header">
                      <el-icon class="function-icon"><component :is="item.icon || 'el-icon-s-operation'" /></el-icon>
                      <div class="function-info">
                        <div class="function-name">{{ item.name }}</div>
                        <div class="function-desc">{{ item.docs }}</div>
                      </div>
                      <div class="function-price">
                        <span class="price-amount">¥{{ item.price }}</span>
                        <el-tag v-if="selectedSubCategory?.id === item.id" type="success" effect="dark" size="small">
                          已选择
                        </el-tag>
                      </div>
                    </div>
                  </el-card>
                </div>
                <el-alert v-if="showError" type="error" :title="errorMessage" class="error-alert" />
              </div>
              <el-empty v-else description="暂无功能数据，请先选择服务" />
            </el-skeleton>
          </div>
          
          <!-- 第三步：输入账号信息并选择课程 -->
          <div v-else-if="currentStep === 2">
            <el-alert type="info" :title="currentTip" style="margin-bottom: 16px;" />
            <h2>账号信息</h2>
            <el-form 
              :model="formData" 
              :label-position="isMobile ? 'top' : 'left'" 
              :label-width="isMobile ? 'auto' : '100px'"
              class="account-form"
              size="medium"
            >
              <el-form-item label="学校名称" prop="school">
                <el-input 
                  v-model="formData.school" 
                  placeholder="请输入学校名称" 
                  clearable
                  prefix-icon="el-icon-school"
                />
              </el-form-item>
              <el-form-item label="账号" prop="user">
                <el-input 
                  v-model="formData.user" 
                  placeholder="请输入账号" 
                  clearable
                  prefix-icon="el-icon-user"
                />
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input 
                  v-model="formData.pass" 
                  type="password" 
                  placeholder="请输入密码" 
                  show-password
                  prefix-icon="el-icon-lock"
                />
              </el-form-item>
            </el-form>
            
            <div class="action-buttons">
              <div style="display: flex; gap: 12px;">
                <el-button type="primary" @click="fetchCourses" :loading="coursesLoading">查询课程</el-button>
                <el-button @click="useMockData" :disabled="coursesLoading">使用模拟数据</el-button>
              </div>
            </div>
            
            <el-alert v-if="showError" type="error" :title="errorMessage" class="error-alert" />
            
            <el-divider />
            
            <el-skeleton :loading="coursesLoading">
              <div v-if="courses.length > 0" class="courses-section">
                <h2>选择课程</h2>
                <div class="price-summary">
                  <span>单价：¥{{ (selectedSubCategory?.price || 0).toFixed(1) }}</span>
                  <span>已选：{{ selectedCourses.length }} 门</span>
                  <span class="total-price">总价：¥{{ totalPrice.toFixed(1) }}</span>
                </div>
                <br>
                <el-checkbox-group v-model="selectedCourses">
                  <el-row :gutter="12" class="courses-grid">
                    <el-col v-for="course in courses" :key="course.id || course.courseId" :span="24">
                      <el-card 
                        shadow="hover" 
                        :body-style="{padding: '16px'}"
                        class="course-card"
                        :class="{'selected-course': selectedCourses.includes(course.id || course.courseId)}"
                      >
                        <div class="course-item">
                          <el-checkbox 
                            :label="course.name || course.courseName" 
                            class="course-checkbox"
                          />
                          <div class="course-info">
                            <div class="course-header">
                              <span class="course-title">{{ course.name || course.courseName }}</span>
                              <div class="course-id-wrapper">
                                <el-tag 
                                  size="small" 
                                  type="info"
                                  effect="plain"
                                  v-if="course.id || course.courseId"
                                  class="course-id"
                                >
                                  <el-icon><PriceTag /></el-icon>
                                  ID:{{ course.id || course.courseId }}
                                </el-tag>
                              </div>
                            </div>
                            <div class="course-details">
                              <div class="course-meta">
                                <el-icon><Clock /></el-icon>
                                <span>30天</span>
                              </div>
                              <div class="course-meta">
                                <el-icon><User /></el-icon>
                                <span>{{ course.teacher || '未知教师' }}</span>
                              </div>
                              <div class="course-price">
                                <el-tag type="danger" size="small" effect="dark">
                                  ¥{{ (selectedSubCategory?.price || 0).toFixed(1) }}
                                </el-tag>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
              <el-empty v-else description="暂无课程数据，请先查询课程" />
            </el-skeleton>
          </div>
          
          <!-- 第四步：协议确认 -->
          <div v-else-if="currentStep === 3">
            <el-alert type="info" :title="currentTip" style="margin-bottom: 16px;" />
            
            <el-card header="用户协议" style="margin-bottom: 16px;">
              <div style="max-height: 300px; overflow-y: auto; padding: 12px; border: 1px solid #eee; border-radius: 4px;">
                <h3>用户服务协议</h3>
                <p>1. 用户在使用本服务前需仔细阅读本协议...</p>
                <p>2. 用户需保证所提供的信息真实有效...</p>
                <p>3. 用户需遵守相关法律法规...</p>
              </div>
              
              <template #footer>
                <div style="display: flex; justify-content: center;">
                  <el-checkbox v-model="agreedToTerms">我已阅读并同意以上协议</el-checkbox>
                </div>
              </template>
            </el-card>
          </div>
          
          <!-- 第五步：付款 -->
          <div v-else-if="currentStep === 4">
            <el-alert type="info" :title="currentTip" style="margin-bottom: 16px;" />
            <el-result
              icon="success"
              title="订单确认"
              sub-title="请确认您的订单信息并选择支付方式"
            >
              <template #extra>
                <el-button type="primary" @click="submitOrder">提交订单</el-button>
              </template>
            </el-result>
            
                          <div class="order-summary">
                            <div class="order-section">
                              <h4>商品信息</h4>
                              <div class="order-content">
                                <div>名称: {{ selectedSubCategory?.name }}</div>
                                <div>单价: ¥{{ selectedSubCategory?.price }}</div>
                                <div>描述: {{ selectedSubCategory?.docs }}</div>
                              </div>
                            </div>
                
                            <el-divider />
                
                            <div class="order-section">
                              <h4>订单信息</h4>
                              <div class="order-content">
                                <div>选择课程数: {{ selectedCourses.length }}</div>
                                <div>总价: ¥{{ totalPrice }}</div>
                              </div>
                            </div>
                
                            <el-divider />
                
                            <h4>选择支付方式</h4>
                            <el-radio-group v-model="paymentMethod" class="payment-radio-group">
                              <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                <el-radio-button 
                                  label="alipay"
                                  :size="isMobile ? 'small' : 'medium'"
                                >
                                  支付宝支付
                                </el-radio-button>
                                <el-radio-button 
                                  label="wechat"
                                  :size="isMobile ? 'small' : 'medium'"
                                >
                                  微信支付
                                </el-radio-button>
                              </div>
                            </el-radio-group>
                
                            <div class="payment-qrcode" v-if="paymentMethod">
                              <div v-if="paymentMethod === 'alipay'" class="qrcode-container">
                                <div class="mock-qrcode alipay">支付宝二维码</div>
                                <span>请使用支付宝扫码支付</span>
                              </div>
                              <div v-else-if="paymentMethod === 'wechat'" class="qrcode-container">
                                <div class="mock-qrcode wechat">微信支付二维码</div>
                                <span>请使用微信扫码支付</span>
                              </div>
                            </div>
                          </div>
          </div>
        </div>
        
        <div class="step-actions">
          <div class="button-group">
            <el-button 
              v-if="currentStep > 0" 
              @click="prevStep"
              class="action-button"
            >
              上一步
            </el-button>
            <el-button 
              v-if="currentStep < 4" 
              type="primary" 
              @click="nextStep"
              class="action-button"
            >
              {{ currentStep === 2 && courses.length === 0 ? '查询课程' : 
                 currentStep === 3 ? '同意并继续' : '下一步' }}
            </el-button>
          </div>
        </div>
      </el-main>
    </el-container>
</template>

<style scoped>
.service-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.header-content {
  padding: 16px;
  background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin: 0;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.service-flow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .service-flow {
    padding: 12px;
    margin: 0 8px;
    box-shadow: none;
    background: transparent;
  }
}

.service-steps {
  margin-bottom: 30px;
}

.service-steps.is-mobile {
  margin-bottom: 20px;
}

/* 步骤条美化 */
.service-steps :deep(.el-step__head) {
  transition: all 0.3s ease;
}

.service-steps :deep(.el-step__head.is-process) {
  border-color: #409EFF;
}

.service-steps :deep(.el-step__title) {
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-steps :deep(.el-step__title.is-process) {
  color: #409EFF;
  font-weight: 600;
}

.service-steps :deep(.el-step__icon) {
  font-size: 24px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .service-page {
    padding: 10px;
  }
  
  .service-steps :deep(.el-step__title) {
    font-size: 12px;
  }
  
  .service-steps :deep(.el-step__description) {
    display: none;
  }
}

.steps-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

.steps-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  padding: 8px 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.steps-container::-webkit-scrollbar {
  display: none;
}

.n-step {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 6px 8px;
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 12px;
  background: #f5f5f5;
  box-sizing: border-box;
}

/* 移动端优化 */
@media (max-width: 480px) {
  .steps-container {
    gap: 4px;
    padding: 6px 0;
  }
  
  .n-step {
    min-width: 48px;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 10px;
  }
  
  .n-step[title="服务"],
  .n-step[title="功能"],
  .n-step[title="选课程"],
  .n-step[title="付款"] {
    min-width: 42px;
  }
}

/* 分类单选按钮样式 */
.category-radio-group {
  margin: 10px 0;
}

.category-radio-button {
  margin: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .steps-container {
    padding: 8px 0;
  }
  
  .n-step {
    min-width: 50px;
    font-size: 12px;
  }

  .category-radio-button {
    padding: 10px 12px;
    margin: 6px;
    font-size: 14px;
  }

  .product-header {
    font-size: 16px;
  }

  .product-content {
    font-size: 14px;
  }
}

.step-content {
  min-height: 300px;
  padding: 10px 0;
}

.step-actions {
  margin-top: 24px;
  padding: 0 16px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.action-button {
  flex: 1;
  max-width: 200px;
  height: 40px;
}

@media (max-width: 768px) {
  .step-actions {
    padding: 0 16px;
    margin-top: 16px;
  }
  
  .button-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  
  .action-button {
    flex: 1;
    min-width: 120px;
    height: 44px;
    font-size: 15px;
    margin: 0;
    padding: 0;
  }
}

.category-section,
.sub-category-section,
.courses-section {
  margin-bottom: 20px;
}

.category-radio-group {
  margin: 10px 0;
}

.category-radio-button {
  margin-bottom: 8px;
}

.sub-category-grid {
  margin-top: 10px;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-content {
  margin: 10px 0;
  min-height: 60px;
}

/* 卡片样式优化 */
.service-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.selected-card {
  border: 2px solid #409EFF;
  background-color: #f0f7ff;
}

/* 课程项样式 */
.course-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.selected-course {
  border: 2px solid #409EFF;
  background-color: #f0f7ff;
}

.course-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.course-checkbox {
  margin-top: 2px;
}

.course-info {
  flex: 1;
  min-width: 0;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.course-title {
  font-weight: 500;
  color: #303133;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-id-wrapper {
  margin-left: 8px;
}

.course-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}

.course-id .el-icon {
  font-size: 14px;
}

.course-details {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.course-meta .el-icon {
  font-size: 14px;
  color: #909399;
}

.course-price {
  margin-top: 8px;
}

.course-price .el-tag {
  font-weight: bold;
  padding: 0 8px;
}

@media (max-width: 768px) {
  .course-price {
    margin-top: 4px;
  }
  
  .course-price .el-tag {
    font-size: 12px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .course-item {
    flex-direction: column;
    gap: 8px;
  }
  
  .course-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .course-id-wrapper {
    margin-left: 0;
    margin-top: 4px;
  }
  
  .course-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* 表单样式优化 */
.account-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.account-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.account-form :deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

.account-form :deep(.el-input__prefix) {
  display: flex;
  align-items: center;
  color: #c0c4cc;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .course-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .account-form {
    padding: 16px;
  }
  
  .account-form :deep(.el-form-item__label) {
    margin-bottom: 4px;
  }
}

.course-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.action-buttons {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-form {
  max-width: 100%;
}

.order-summary {
  margin-top: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.order-section {
  margin-bottom: 16px;
}

.order-section h4 {
  margin-bottom: 12px;
  color: #303133;
}

.order-content {
  padding-left: 16px;
  color: #606266;
}

.order-content div {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .order-summary {
    padding: 12px;
  }
  
  .order-section {
    margin-bottom: 12px;
  }
  
  .order-content {
    padding-left: 0;
  }
}

.price-info {
  margin-bottom: 20px;
}

.payment-radio-group {
  margin: 10px 0;
}

.payment-qrcode {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mock-qrcode {
  width: clamp(150px, 50vw, 200px);
  height: clamp(150px, 50vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  font-size: 16px;
  color: #666;
  text-align: center;
  padding: 10px;
}

.mock-qrcode.alipay {
  background-color: #00a0e9;
  color: white;
}

.mock-qrcode.wechat {
  background-color: #07c160;
  color: white;
}

.error-alert {
  margin: 16px 0;
}

/* 功能卡片样式 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.function-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
}

.function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.selected-function {
  border: 2px solid #409EFF;
  background-color: #f0f7ff;
}

.function-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.function-icon {
  font-size: 24px;
  color: #409EFF;
}

.function-info {
  flex: 1;
}

.function-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.function-desc {
  font-size: 12px;
  color: #909399;
}

.function-price {
  text-align: right;
}

.price-amount {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .function-grid {
    grid-template-columns: 1fr;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-card {
    margin: 5px;
    padding: 10px;
  }
  
  .step-content {
    padding: 5px 0;
  }
  
  .step-actions {
    flex-direction: column;
  }
  
  .step-actions button {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .product-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .course-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .payment-qrcode {
    flex-direction: column;
  }
}
</style>